<!--
 * @Description:土豆链式运动
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 11:41:15
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>土豆链式运动</title>
	<script src="./move.js"></script>
	<style>
	 *{margin: 0; padding: 0; overflow: hidden;}
		.box-flex{
			position: fixed;
			width: 100px;
			height:50px;
			right: 0;
			line-height: 50px;
			text-align: center;
			bottom: 0;
			border: 1px solid #000000;
			z-index: 30;
			background: #fff;
			/* overflow: hidden; */
		}
		#zindeX{
			width: 203px; 
			height: 50px;
			background: darkgoldenrod;
			position: absolute;
			right: -312px;
			bottom: 0;
			z-index: 20;
			border: 1px solid #000000;
		}
		#zindeY{
			bottom: -315px;
			display: none;
			height: 315px;
			padding: 0 0 48px;
			position: absolute;
			right: 1px;
			width: 200px;
			z-index: 19;
			background: darkorchid;
		}
		.zindeY-km{
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			border: 1px solid seashell;
			line-height: 50px;
			text-align: center;
		}
	</style>
	<script>
		window.onload = function () {
			var oBtnShow = document.getElementById("but")
			var oBtnClose = document.getElementById("zindeYkm")
			var oBottom = document.getElementById("zindeX")
			var oBox = document.getElementById("zindeY")
			oBtnShow.onclick=function(){
				startmove(oBottom,'right',100,function(){
						oBox.style.display="block"
						startmove(oBox,'bottom',50,function(){
						})
				})
			}
			
			oBtnClose.onclick=function(){
				startmove(oBox,'bottom',-315,function(){
						oBox.style.display="none"
						startmove(oBottom,'right',-165,function(){
						})
				})

			}

		}
	</script>
</head>

<body>
		<div class="box-flex" id="but">
		 点击土豆 🥔
		 
		</div>

		<div id="zindeX"></div>
		<div id="zindeY">
			<div class="zindeY-km" id="zindeYkm">
				关闭
			</div>
		</div>
		
</body>
   
</html>